<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="1.css">
</head>
<body>
	<div class="box">
		<div class="swiper-container a1">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide dv"> <!--<img src="img(1)/内网通截图20190118094911.png" alt="">--></div> 
		        <div class="swiper-slide dv">
		        	<!-- <img src="img(1)/内网通截图20190118095251.png" alt=""> -->
		        </div>
		        <div class="swiper-slide dv">
		        	<!-- <img src="img(1)/内网通截图20190118095954.png" alt=""> -->
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		    
		    <!-- 如果需要滚动条 -->
		    <div class="swiper-scrollbar"></div>
		</div>
		<div class="a2 wrapper" id="wrapper">
			<div class="aa content">
				<dl>
					<dt><img src="img(1)/s05.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl>
				<dl>
					<dt><img src="img(1)/s04.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl>
				<dl>
					<dt><img src="img(1)/s02.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl>
				<dl>
					<dt><img src="img(1)/s01.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl>
				<dl>
					<dt><img src="img(1)/s03.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl>
				<dl>
					<dt><img src="img(1)/s03.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl><dl>
					<dt><img src="img(1)/s01.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl><dl>
					<dt><img src="img(1)/s05.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl><dl>
					<dt><img src="img(1)/s05.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl><dl>
					<dt><img src="img(1)/s05.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl><dl>
					<dt><img src="img(1)/s05.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl><dl>
					<dt><img src="img(1)/s05.png" alt=""></dt>
					<dd>
						<h3>山西刀削面</h3>
						<p>
						<span>月售389</span><span>36分钟 196km</span>
						</p>
						<h5>起送￥10 免配送费 人均￥12</h5>
					</dd>
				</dl>
				<div class="up">加载更多</div>
				<div class="down">刷新数据</div>
			</div>
		</div>
	</div>
	<script src="../lib/better-scroll/bscroll.min.js"></script>
	<script src="../lib/swiper/js/swiper.min.js"></script>
	<script>
		var wrapper = document.querySelector('.wrapper');
		var content = document.querySelector('.content')
		var up = document.querySelector('.up')
		var down = document.querySelector('.down')
		var bs = new BScroll(wrapper,{
			scrollbar: {//滚动条
				fade: true,
				interactive: false
			},
			pullDownRefresh: {//下拉刷新
			  	threshold: 50,
			  	stop: 50
			},
			pullUpLoad: {//上拉加载
			    threshold: 20
			}
		})

		bs.on('pullingDown',function(){
			down.innerHTML='加载中。。。'
			setTimeout(function(){
				var str='';
				for(var i=0;i<10;i++){
					str+='<dl><dt><img src="img(1)/s03.png" alt=""></dt><dd><h3>饸咯面</h3><p><span>月售389</span><span>36分钟 196km</span></p><h5>起送￥10 免配送费 人均￥12</h5></dd></dl>'
				}
				content.innerHTML=str;
				down.innerHTML='刷新数据'
				bs.finishPullDown();
				bs.refresh();
			},2000)
		})

		bs.on('pullingUp',function(){
			up.innerHTML='加载中。。。'
			setTimeout(function(){
				var str='';
				for(var i=10;i>0;i--){
					str+='<dl><dt><img src="img(1)/s03.png" alt=""></dt><dd><h3>饸咯面</h3><p><span>月售389</span><span>36分钟 196km</span></p><h5>起送￥10 免配送费 人均￥12</h5></dd></dl>'
				}
				content.innerHTML=str;
				up.innerHTML='加载完成'
				bs.finishPullUp();
				bs.refresh();
			},2000)
		})
		
		bs.on('scroll',function(){
			//console.log(bs.x,bs.y)
			down.style.top=bs.y-50+'px'
		})


		var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'horizontal', // 垂直切换选项
		    loop: true, // 循环模式选项
		    
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		    },
		    
		    // 如果需要前进后退按钮
		    navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },

	  	})
	</script>
</body>
</html>